<template>
  <main id="main" class="site-main karma-blog-page" role="main">
    <div class="container">
      <div class="row">
        <div class="karma-blog-content col-sm-9" v-if="articles.length <= 0">
          <div class="masonry-grid">
            <div class="masonry-grid-item col-1">
              <article class="blog-grid athena-blog-post reveal fadeInUp">
                <div class="blog-grid-box-shadow">
                  <div class="blog-grid-content">
                    <h2 class="blog-grid-title-md">啥都没有(((ﾟДﾟДﾟДﾟ)))</h2>
                    <p></p>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
        <div class="karma-blog-content col-sm-9" v-else>
          <div v-for="(item,key) in articles" class="masonry-grid">
            <div class="masonry-grid-item col-1">
              <article class="blog-grid athena-blog-post reveal fadeInUp">
                <div class="blog-grid-box-shadow">
                  <div class="blog-grid-content">
                    <h2 class="blog-grid-title-md"><a :href="`#detail/${item.id}`">{{
                        item.title
                      }}</a>
                    </h2>
                    <div v-show="item.cover" class="starImg">
                      <a :href="`#detail/${item.id}`">
                        <img class="img-responsive margin-b-10" :src="item.cover">
                      </a>
                    </div>
                    <p>{{ item.summary }}</p>
                  </div>
                  <div class="blog-grid-supplemental">
                            <span class="blog-grid-supplemental-title">
                                <a class="blog-grid-supplemental-category" href="javascript:void(0);">
                                    <i class="fa fa-leaf"></i>管理员
                                </a> - <i class="fa fa-clock-o"></i> {{ item.created_at }}
                            </span>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
        <div class="col-sm-3 hidden-sm hidden-xs secondary">
          <div class="widget-area" role="complementary">
            <div class="blog-sidebar margin-b-30">
              <div class="blog-sidebar-heading">
                <h4 class="blog-sidebar-heading-title"><i
                    class="blog-sidebar-heading-icon fa fa-search"></i>搜索</h4>
              </div>
              <div class="blog-sidebar-content">
                <form method="get">
                  <div class="input-group">
                    <input type="text" class="form-control" v-model="title" name="title"
                           placeholder="输入搜索的文章名">
                    <span class="input-group-btn"><button @click.prevent="searchList"
                                                          class="btn btn-default">搜索</button></span>
                  </div>
                </form>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="col-sm-3 hidden-sm hidden-xs secondary">
          <div class="widget-area" role="complementary">
            <div class="blog-sidebar-heading">
              <h4 class="blog-sidebar-heading-title"><i
                  class="blog-sidebar-heading-icon fa fa-fire"></i>热门文章</h4>
            </div>
            <div class="blog-sidebar-content scrollbar">
              <ul class="timeline-v2">
                <li v-for="(val,key) in list" class="timeline-v2-list-item">
                  <i class="timeline-v2-badge-icon radius-circle fa fa-calendar"></i>
                  <small class="timeline-v2-news-date">{{ val.created_at }}</small>
                  <h5 class="timeline-v2-news-title">
                    <a :href="`#detail/${val.id}`">{{ val.title }}</a>
                  </h5>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <!--页码开始-->
    <div class="karma-pagination">
      <div v-show="pagination" class="bg-color-sky-light">
        <div class="content-xs container">
          <div class="row">
            <div class="col-sm-9">
              <div class="paginations-v2 text-center">
                <ul class="paginations-v2-list">
                  <li v-if="pagination?.prev_page === 0" class="disabled"><span>上一页</span></li>
                  <!--:href="`#page=${pagination?.prev_page}&${pagination?.where}`"-->
                  <li v-else><a @click="getList(pagination?.prev_page,pagination?.where)"
                                href="javascript:void(0);" rel="prev">上一页</a></li>
                  <li v-for="(item,key) in pagination?.nums"
                      :class="item === pagination?.current_page ?'active':''">
                    <span v-if="item === pagination?.current_page">{{ item }}</span>
                    <!--:href="`#/page=${item}&${pagination?.where}`"-->
                    <a v-else @click="getList(item,pagination?.where)" href="javascript:void(0);">{{
                        item
                      }}</a>
                  </li>
                  <li v-if="pagination.last_page !== pagination.current_page">
                    <!--:href="`/#page=${pagination?.next_page}&${pagination?.where}`"-->
                    <a class="page-link" @click="getList(pagination?.next_page,pagination?.where)"
                       href="javascript:void(0);" rel="next">下一页</a>
                  </li>
                  <li v-else class="disabled"><span>下一页</span></li>
                </ul>
              </div>
            </div>
            <div class="col-sm-3"></div>
          </div>
        </div>
      </div>
    </div>
    <!--页码结束-->
  </main>
</template>

<script>
import BaseService from "@/services/BaseService";

const BaseServiceApi = new BaseService();
export default {
  name: "List",
  data: function () {
    return {
      type: this.$route.params.type,
      title: "",
      articles: [],
      list: [],
      pagination: {}
    };
  },
  mounted: function () {
    this.getList();
    this.getTopic();
  },
  methods: {
    getList: function (page, where) {
      //TODO 获取URL参数
      let data = {};
      if (typeof (this.type) !== "undefined") {
        data.type = this.type
      }
      if (typeof (this.title) !== "undefined" && this.title.length > 0) {
        data.title = this.title
      }
      if (typeof (page) !== "undefined") {
        data.page = page
      }
      if (typeof (where) !== "undefined" && where.length > 0) {
        let arrWhere = where.split('&');
        let tmp = "";
        arrWhere.forEach((val, key) => {
          tmp = val.split("=");
          data[tmp[0]] = this.string2Int(tmp[1])
        });
      }
      console.log(data);
      BaseServiceApi.getApi("/api/v1/index", data).then(res => {
        if (res.data.code === 200) {
          this.articles = res.data.list;
          this.pagination = res.data.pagination;
        }
      });
    },
    getTopic: function () {
      BaseServiceApi.getApi("/api/v1/list").then(res => {
        if (res.data.code === 200) {
          this.list = res.data.list;
        }
      });
    },
    string2Int: function (val) {
      //非负浮点数
      let regPos = /^\d+(\.\d+)?$/;
      //负浮点数
      let regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
      if (regPos.test(val) || regNeg.test(val)) {
        return Number(val);
      } else {
        return val;
      }
    },
    searchList: function () {
      this.getList();
    }
  },
  watch: {
    '$route': function (to, from) {
      if (to.name === "List") {
        window.location.reload();
      }
    }
  }
}
</script>

<style scoped>

</style>
